<script setup>
import { useDark, useToggle } from '@vueuse/core'
import IconDark from '@/components/icons/IconDark.vue'
import IconLight from '@/components/icons/IconLight.vue'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
  <el-button style="width: 32px" @click="toggleDark()">
    <IconDark v-if="isDark" />
    <IconLight v-else />
  </el-button>
</template>

<style scoped>
.el-tooltip__trigger {
  outline: unset;
}
</style>
